<template>
  <div class="table-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button
          icon="el-icon-s-comment"
          type="primary"
          @click="audioExtract"
        >
          语音提取
        </el-button>
        <el-button icon="el-icon-scissors" type="primary" @click="audioMerge">
          音视频合成
        </el-button>
        <el-button
          icon="el-icon-scissors"
          type="primary"
          @click="handleVideoMerge"
        >
          视频合并
        </el-button>
      </vab-query-form-left-panel>
      <!--      <vab-query-form-right-panel :span="12">-->
      <!--        <el-form :inline="true" :model="queryForm" @submit.native.prevent>-->
      <!--          <el-form-item>-->
      <!--            <el-input-->
      <!--              v-model.trim="queryForm.name"-->
      <!--              placeholder="请输入视频名"-->
      <!--              clearable-->
      <!--            />-->
      <!--          </el-form-item>-->
      <!--          <el-form-item>-->
      <!--            <el-button icon="el-icon-search" type="primary" @click="fetchData">-->
      <!--              查询-->
      <!--            </el-button>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--      </vab-query-form-right-panel>-->
    </vab-query-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
      :height="height"
      @selection-change="setSelectRows"
    >
      <el-table-column
        show-overflow-tooltip
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="name"
        label="名称"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="开始时间"
        prop="startTime"
      ></el-table-column>
      <el-table-column show-overflow-tooltip label="时长" prop="duration">
        <template slot-scope="scope">{{ scope.row.duration }}s</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="音频" prop="voice">
        <template #default="{ row }">
          <AudioPlay
            :disabled="!row.speechId"
            :audiourl="row.speechUrl"
          ></AudioPlay>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="250px"
        prop="operation"
      >
        <template #default="{ row }">
          <el-row>
            <el-col :span="6">
              <DetailPlay :url="row.clipUrl" :title="row.name"></DetailPlay>
            </el-col>
            <el-col :span="6">
              <el-button
                :disabled="!row.speechId"
                type="text"
                @click="audio2Text(row.speechId)"
              >
                文本编辑
              </el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="文本编辑"
      :visible.sync="textdialog"
      width="35%"
      :close-on-click-modal="false"
    >
      <el-form ref="form" v-loading="textload" :model="form">
        <el-form-item prop="title">
          <label>
            <textarea
              v-model="textdata"
              style="width: 100%; resize: none"
              rows="10"
            ></textarea>
          </label>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="text2audio()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    aToText,
    audioextract,
    audiomerge,
    getdetail,
    tToAudio,
    videomerge,
  } from '@/api/videos'
  import DetailPlay from './components/detailPlay'
  import AudioPlay from './components/audioPlay'

  export default {
    name: 'VideoDetail',
    components: { DetailPlay, AudioPlay },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger',
        }
        return statusMap[status]
      },
    },
    data() {
      return {
        form: {
          title: '文本编辑',
        },
        textdata: '',
        textdialog: false,
        textload: false,
        list: [],
        imageList: [],
        listLoading: true,
        selectRows: [],
        elementLoadingText: '正在加载...',
        speechId: 0,
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight()
      },
    },
    created() {
      this.fetchData()
    },
    mounted() {},
    methods: {
      test() {
        console.log('test print')
      },
      async text2audio() {
        this.textload = true
        let textkey = {
          text: '',
        }
        textkey.text = this.textdata
        const msg = await tToAudio(textkey, this.speechId)
        if (msg.data.success) {
          this.$message({
            message: '编辑成功，快去听听看吧！',
            type: 'success',
          })
        } else {
          this.$message({
            message: '编辑失败，再试一次吧！',
            type: 'error',
          })
        }
        this.textdialog = false
        await this.fetchData()
        this.textload = false
      },
      async audio2Text(val) {
        if (val === null || val === '') {
          this.$message({
            message: '您还未进行语音提取操作哦，快去提取吧！',
            type: 'warning',
          })
          return
        }
        this.textdialog = true
        this.textload = true
        this.textdata = ''
        this.speechId = val
        const result = await aToText(val)
        this.textdata = result.data.data.replace(/"/g, '')
        setTimeout(() => {
          this.textload = false
        }, 500)
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      async doAudioextract(paykey) {},
      async audioExtract() {
        if (this.selectRows.length === 1) {
          const ids_join = this.selectRows.map((item) => item.id).join()
          let paykey = {
            clipIds: [],
          }
          let temp = ''
          for (let i = 0; i < ids_join.length; i++) {
            if (ids_join[i] !== ',') temp = temp + ids_join[i]
            else {
              paykey.clipIds.push(Number(temp))
              temp = ''
            }
          }
          paykey.clipIds.push(Number(temp))
          const msg = await audioextract(paykey)
          if (msg.data.success) this.$baseMessage('提取成功！', 'success')
          else this.$baseMessage('提取失败,再试一次吧！', 'error')
          await this.fetchData()
        } else if (this.selectRows.length > 1) {
          this.$baseMessage('目前只支持单条提取哦，请重新选择。', 'warning')
          return false
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      },
      //语音视频合成
      audioMerge() {
        if (this.selectRows.length === 1) {
          const ids_join = this.selectRows.map((item) => item.id).join()
          let paykey = {
            clipIds: [],
          }
          let temp = ''
          for (let i = 0; i < ids_join.length; i++) {
            if (ids_join[i] !== ',') temp = temp + ids_join[i]
            else {
              paykey.clipIds.push(Number(temp))
              temp = ''
            }
          }
          paykey.clipIds.push(Number(temp))
          this.$baseConfirm('你确定要合并选中项音频吗', null, async () => {
            const { msg } = await audiomerge(paykey)
            this.$baseMessage('合并成功！', 'success')
          })
        } else if (this.selectRows.length > 1) {
          this.$baseMessage('目前只支持单条合成哦，请重新选择。', 'warning')
          return false
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      },
      //视频合并
      handleVideoMerge() {
        const id = this.$route.query.id
        this.$baseConfirm('确定将所有视频合并吗！', null, async () => {
          await videomerge(id)
          this.$baseMessage('合并成功，快去视频管理页面看看吧！', 'success')
          await this.$router.push({ path: '/vab/videos' })
        })
      },
      async fetchData() {
        this.listLoading = true
        const id = this.$route.query.id
        const result = await getdetail(id)
        const query = result.data.data
        this.list = query.videoClips
        this.total = this.list.length
        setTimeout(() => {
          this.listLoading = false
        }, 500)
      },
      playing: function () {
        this.content
      },
    },
  }
</script>
